<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="text-bold text-lg text-black margin-right-sm">全部</text>
				<text v-if="data.news>0" class="cu-tag bg-red round sm">{{data.news}}</text>
			</view>
			<view class="action">
				<view class="text-gray" @click="clearRead"><text class="cuIcon-roundclose"></text>删除已读</view>
				<view class="text-gray margin-left" @click="allRead"><text class="cuIcon-notice_forbid_fill"></text>全部已读</view>
			</view>
		</view>
		<view class="cu-list menu solid-top" v-if="data.list.length>0">
			<view class="cu-item arrow" :class="currview==item.id?'active':''" v-for="(item, index) in data.list" :key="index">
				<view class="content">
					<view @click="viewMsg(item,index)" :class="[(currview==item.id?'padding-top-sm':''),(item.hasread||data.news==0?'text-gray':'text-orange')]">
						<text class="cuIcon-title margin-0"></text>
						<text class="text-boldm text-lg">{{item.title}}</text>
					</view>
					<view class="summary padding-sm" v-if="currview==item.id">
						<view><text selectable="true">{{item.summary}}</text></view>
						<view class="justify-between flex">
							<view class="text-gray">{{item.createdate}}</view>
							<view class="text-blue" v-if="item.url!=''">
								<text @click="naviTo(item.url)">查看详情</text>
							</view>
						</view>
					</view>
				</view>
				<view class="action">
					<text>{{item.createtime}}</text>
				</view>
			</view>
		</view>
		<view class="text-center text-gray padding" v-else>
			<view class="text-empty">空空如也</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import core from "@/static/core.js"
	import store from '@/store/index.js'
	
	export default {
		computed: mapState(['hasLogin', 'newMsg']),
		data() {
			return {
				page:1,
				loadmore:'more',
				currview:0,
				data:{
					title:"我的信箱",
					list:[],
					total:0,
					news:0
				}
			}
		},
		onLoad() {
		},
		onShow() {
			if(!this.hasLogin) return core.navito('auth/index',{forward:'member/message'},1);
			var that = this;
			this.initData('member/message',{},function(res){
				that.loadmore = res.list.length<15 ? 'noMore' : 'more';
				store.commit('setnewmsg',res.news);
			});
		},
		onPullDownRefresh() {
			var that = this;
			this.initData('member/message',{},function(res){
				that.currview = 0;
				that.page = 1;
				that.loadmore = res.list.length<15 ? 'noMore' : 'more';
			});
			uni.stopPullDownRefresh();
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					// if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
					// 	return core.report(res, true);
					// }
					that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
			},
			viewMsg(msg,index){
				if(this.currview==msg.id) return this.currview = 0;
				this.currview = msg.id;
				if(msg.hasread==0){
					var that = this;
					core.get('member/message',function(res){
						if(res.type!='success') return core.report(res);
						that.data.list[index].hasread = 1;
						that.data.news -= 1;
						store.commit('readmsg',false);
					},{op:'hasread',id:msg.id})
				}
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			clearRead(){
				var that = this;
				return core.confirm('删除后不可恢复，是否确定要删除？','删除已读信息',function(){
					that.initData('member/message',{op:'clearread'},function(res){
						that.currview = 0;
						that.page = 1;
						that.loadmore = res.list.length<15 ? 'noMore' : 'more';
					});
				})
			},
			allRead(){
				if(this.data.news==0) return core.toast('已全部标为已读');
				var that = this;
				core.get('member/message',function(res){
					if(res.type!='success') return core.report(res);
					that.data.news = 0;
					store.commit('readmsg',true);
				},{op:'allread'})
			},
			unSupport(){
				return core.toast('敬请期待');
			}
		}
	}
</script>

<style>
.cu-list .cu-item.arrow.active::before{content: "\e661";}
</style>
